<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/font-awesome.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/animate.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/css/jdGrid/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
    <link href="${request.contextPath}/static/css/style.css" rel="stylesheet">


    <style></style>

</head>
<body class="fixed-sidebar full-height-layout">

<input type="hidden" id="hi1">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>角色管理</h2>
        <ol class="breadcrumb">
            <li>
                <a href="/">控制台</a>
            </li>
            <li class="active">
                <strong>角色管理</strong>
            </li>
        </ol>
    </div>

    <div class="col-sm-8">
        <div class="title-action">
            <a href="javascript:;" id="add" onclick="handle.add()" class="btn btn-primary"><i class="fa fa-pencil"></i> 添加</a>
            <!-- 增加按钮 -->
        </div>
    </div>
</div>
</div>

<div class="wrapper wrapper-content">


    <div class="ibox">


        <div class="ibox-content">


            <div id="content" class="row">
                <div class="row">
                    <div class="col-sm-12">
                        <form id="searchForm" class="form-inline" method="post" onsubmit="return false;">
                            <input id="officeId" name="officeId" type="hidden" value="1">

                            <!-- 支持排序 -->
                            <div class="form-group">
                                <span>角色名称：</span>
                                <input name="name" class=" form-control input-sm" type="text"
                                       value="" maxlength="50" id="name">

                                <button type="button" class="btn btn-sm btn-primary" id="search-btn"><i
                                            class="fa fa-search"></i> 搜索
                                </button>
                                </span>
                            </div>
                        </form>
                        <br>
                    </div>
                </div>


                <div class="row">
                    <div class="col-sm-12">
                        <div class="jqGrid_wrapper">
                            <table id="datatable"></table>
                            <div id="table_pager"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="${request.contextPath}/static/js/jquery.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/layer/layer.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/jquery-1.12.4.js"></script>
<script src="${request.contextPath}/static/js/tookeen.js"></script>
<script src="${request.contextPath}/static/js/common.js"></script><script src="/static/js/contabs-v2.js" type="text/javascript"></script>
<script src="${request.contextPath}/static/js/contabs-v2.js" type="text/javascript"></script>
<script src="${request.contextPath}/static/js/grid.locale-cn.js"></script>
<script src="${request.contextPath}/static/js/jquery.jqGrid.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${request.contextPath}/static/js/common-ui.js?v=3.0.0"></script>
<script src="${request.contextPath}/static/js/Role.js"></script>

<script>

    $(function () {
        tableInit();
    });

    var prefix = "${request.contextPath}/roleManage";

    var queryUrl = prefix + "/tableShow";
    function tableInit() {

        var name = $("#name").val();
        $('#datatable').bootstrapTable({
            url: queryUrl,                      //请求后台的URL（*）
            method: 'POST',                      //请求方式（*）
            contentType:"application/x-www-form-urlencoded",
            // classes: 'table table-hover',  //table加样式
            // theadClasses: "tableHead",                // 表头加样式
            //height: 400,
            // toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                     //是否显示行间隔色
            //cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams : function(params){
                return{
                    offset  : params.offset,
                    limit   : params.limit,
                    roleName :name
                }

            },
            paginationLoop:false,                 //是否循环，从最后一页跳转到第一页（*）
            //sortable: true,                     //是否启用排序
            //sortOrder: "asc",                   //排序方式
            sidePagination: "client",             //分页方式：client客户端分页，server服务端分页（*）
            striped : true,                       //设置隔行变色效果
            minimumCountColumns : 2,              //当列数小于此值时，将隐藏内容列下拉框。
            paginationPreText : '上一页',
            paginationNextText : '下一页',
            pageNumber: 1,                        //初始化加载第一页，默认第一页,并记录
            pageSize : 3,                         //每页的记录行数（*）
            pageList : [3,6,9],                   //可供选择的每页的行数（*）
            search: false,                        //是否显示表格搜索
            strictSearch: false,
            showColumns: false,                   //是否显示所有的列（选择显示的列）
            //showRefresh: true,                  //是否显示刷新按钮
            //minimumCountColumns: 2,             //最少允许的列数
            // clickToSelect: true,               //是否启用点击选中行
            // uniqueId: "id",                    //每一行的唯一标识，一般为主键列
            // showToggle: false,                 //是否显示详细视图和列表视图的切换按钮
            // cardView: false,                   //是否显示详细视图
            // detailView: false,                 //是否显示父子表
            columns: [
                {
                    field: 'roleId',
                    title: '序号',
                    align: 'center',
                    visible: true
                }, {
                    field: 'roleName',
                    title: '角色名称',
                    align: 'center',
                    sort: 'desc'
                },{
                    field: 'roleKey',
                    title: '角色值',
                    align: 'center'
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center'
                },{
                    field: 'remark',
                    title: '备注',
                    align: 'center'
                },{
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return[
                            '<a href="javascript:;" class="btn btn-info btn-xs"    onclick="handle.view(\'' + row.roleId + '\')" id="seeBtn"><i class="fa fa-search-plus"></i> 查看</a>'
                            + "&nbsp;&nbsp;" +
                            '<a href="javascript:;" class="btn btn-success btn-xs" onclick="handle.add(\'' + row.roleId + '\')"  id="updateBtn"><i class="fa fa-search-plus"></i> 编辑</a>'
                            + "&nbsp;&nbsp;" +
                            '<a href="javascript:;" class="btn btn-danger btn-xs"  onclick="deleteForId(\'' + row.roleId + '\')"  id="deleteBtn"><i class="fa fa-trash"></i> 删除</a>'
                            + "&nbsp;&nbsp;" +
                            '<a href="javascript:;" class="btn btn-primary btn-xs" onclick="setPower(\'' + row.roleId + '\')" id="setPowerBtn"><i class="fa fa-edit"></i> 权限设置</a>'
                            + "&nbsp;&nbsp;" +
                            '<a href="javascript:;" class="btn btn-warning btn-xs" onclick="assignUsers(\'' + row.roleId + '\')" id="assignUsersBtn"><i class="fa fa-plus"></i> 分配用户</a>'
                        ].join('')
                    }

                }]
        });
    }

    $("#search-btn").click(function () {
        $('#datatable').bootstrapTable('destroy');
        tableInit();
    });


    function setPower(id) {

        layer.open({
            type: 2,
            area: ['700px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/roleManage/tree?id=' + id,
            end: function () {
                if($("#hi1").val() == "1"){
                    layer.msg('成功', {icon: 1});
                    window.location.reload();
                }else {

                }

            }
        });
    }

    function deleteForId(id) {
        layer.confirm('确认删除吗？相关的用户角色，菜单角色关系也会删除', {
            btn: ['确认', '取消'] //按钮
        }, function () {
            layer.closeAll();
            Public.ajaxPost("/roleManage/delete", {
                roleId: id
            }, function (result) {
                if (result && 0 == result.code) {
                    alert("成功")
                    layer.msg("操作成功!", {icon: 1});
                    window.location.reload();
                } else {
                    layer.msg(result.message, {icon: 2});
                    return;
                }
            });
        });
    }

    function assignUsers(id) {
        layer.open({
            type: 2,
            title: '分配用户',
            area: ['700px', '450px'],
            shadeClose: true, //点击遮罩关闭
            content:'${request.contextPath}/roleManage/showUser?id='+id,
            end: function () {

                if($("#hi1").val() == "1"){
                    layer.msg('成功', {icon: 1});
                    $('#datatable').bootstrapTable('destroy');
                    tabl01Init();
                }else {

                }

            }
        });
    }



</script>
</html>
